<template>
<div>

<!--面包屑导航-->
<el-breadcrumb separator="-">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>

<!--卡片-->
<el-card class="box-card">

  <!--栅格系统布局-->
    <el-row :gutter="4">
    <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query">
        <el-button slot="append" icon="el-icon-search" @click = getUsers></el-button>
        </el-input>
    </el-col>
    <el-col :span="3">
        <el-button type="primary" @click="dialogVisibleShow">添加用户</el-button>
    </el-col>
    </el-row>

    <!--表格-->
     <el-table
      :data="tableData"
      style="width: 100%" stripe border>
      <el-table-column type="index" label="#">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="role_name"
        label="角色"
        width="180">
      </el-table-column>
      <el-table-column
        label="状态"
        width="180">
        <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state" @change='userStateChange(scope.row)'></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="caozuo"
        label="操作">
        <template slot-scope="scope">
        <el-button size="mini" type="primary" icon="el-icon-edit" @click="dialogVisible2Show(scope.row.id)"></el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteuser(scope.row.id)" ></el-button>
        <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
        <el-button size="mini" type="warning" icon="el-icon-setting" ></el-button>
        </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!--点击添加按钮之后显示的模态框-->
    <el-dialog
    title="添加用户"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <span>
    <el-form label-width="70px">
    <el-form-item label="用户名" required>
    <el-input v-model="addForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" required>
    <el-input v-model="addForm.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" required>
    <el-input v-model="addForm.email"></el-input>
    </el-form-item>
    <el-form-item label="电话" required>
    <el-input v-model="addForm.mobile"></el-input>
    </el-form-item>
    
    </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click=addUser>确 定</el-button>
    </span>
    </el-dialog>

     <!--点击修改用户按钮之后显示的模态框-->
  <el-dialog
    title="修改用户"
    :visible.sync="dialogVisible2"
    width="50%" 
  >
    <span>
    <el-form label-width="70px">
    <el-form-item label="用户名">
    <el-input :disabled="true" v-model ="updateForm.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" required>
    <el-input v-model="updateForm.email"></el-input>
    </el-form-item>
    <el-form-item label="电话" required>
    <el-input v-model="updateForm.mobile"></el-input>
    </el-form-item>
    </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
    </span>
    </el-dialog>
</div>

</template>

<script>
export default{
data(){
    return{
          tableData:'',
          dialogVisible:false,
          dialogVisible2:false,
          queryInfo:{
            query:'',
            pagenum:1,
            pagesize:2
          },
          total:'',
          addForm:{
            username:'',
            password:'',
            email:'',
            mobile:''
          },
          updateForm:{
          },
    }
},
methods:{
    dialogVisibleShow(){
        this.dialogVisible = true
    },
    dialogVisible2Show(id){
      this.dialogVisible2 = true
      this.$http.get('users/'+id).then(data=>{
        if(data.data.meta.status !==200){
          this.$message.error('查询失败')
        }else{
          this.updateForm = data.data.data
        }
      })
    },
    deleteuser(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('users/'+id).then(data=>{
            if(data.data.meta.status!==200){
              this.$message.error('删除失败')
            }else{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      getUsers(){
        var p = this.$http.get('users',
          {params:this.queryInfo})
          p.then(data=>{

            this.tableData = data.data.data.users
            this.total = data.data.data.total
            console.log(data.data)
       })  
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.queryInfo.pagesize = val
        this.getUsers()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.queryInfo.pagenum = val
        this.getUsers()
      },
      userStateChange(row){
        var p = this.$http.put(`users/${row.id}/state/${row.mg_state}`)
        p.then(res =>{
          if(res.data.meta.status !== 200){
            row.mg_state=!row.mg_state
            return this.$message.error("状态更新失败")
          }else{
            this.$message.success("状态修改成功")
            
          }
        }
        )
      },
      addUser(){
        var p = this.$http.post('users',this.addForm)
        p.then(data =>{
          if(data.data.meta.status !== 201){
            this.$message.error('添加失败')
          }else{
            this.$message.success('添加成功')
            this.dialogVisible =false
          }
        })
      },
      updateUser(){

      }
  },
  created(){
  this.getUsers()
  }
   
}
</script>

<style scoped>
.el-row{
  margin:0 0 10px 0;
}
.el-card{
  position:relative;
  padding:0 0 30px;
}
.el-pagination{
  position:absolute;
  left:50%;
  transform:translate(-50%);
  margin:10px 0 0;
}
</style>